<template>
  <el-card class="head-card">
    <el-row type="flex" justify="space-bewteen">
      <div class="befort" v-if="$slots.befort">
        <i class="el-icon-info"></i>
        <slot name="befort"></slot>
      </div>
      <div class="after">
        <slot name="after"></slot></div
    ></el-row>
  </el-card>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.head-card {
  .befort {
    border: 1px solid #abdfff;
    border-radius: 3px;
    background-color: #e6f7ff;
    height: 36px;
    line-height: 36px;
    .el-icon-info {
      padding: 0 8px;
      color: #409eff;
    }
  }
  .after {
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }
  margin: 10px 0;
}
</style>
